<template>
  <div style="height: 100%;overflow:hidden">
    <x-header :left-options="{preventGoBack:true,backText: ''}"
              @on-click-back="backhome">日常巡检单查看</x-header>
    <div class="main-container"
         style="height:93%">
      <v-touch v-on:swiperight="onSwipeRight"
               :swipe-options="{direction: 'horizontal'}">
      <tab bar-position="bottom">
        <tab-item :selected="flagC"
                  @on-item-click="getData">巡检单内容</tab-item>
        <tab-item @on-item-click="queryFlowInfo"
                  :selected="flagF">流程信息</tab-item>
      </tab>
      <div class="sup"></div>
        <div v-if="flagC">
          <group>
            <cell title="项目（部）"
                  v-model="pro">
            </cell>
            <cell v-model="subject"
                  title="任务名称"> </cell>
            <cell title="要求整改日期"
                  v-model="checkStartDate"></cell>
            <cell title="整改完成日期"
                  v-model="checkEndDate"></cell>
          </group>
          <group title="问题图片">
            <picture-upload :fieldToken='ATTACHMENTS'
                            :pageToken='ATTACHMENTS'
                            :value='ATTACHMENTS'
                            :readonly='true'></picture-upload>

          </group>
          <group title="整改图片">
            <picture-upload :fieldToken='ATTACHMENTS2'
                            :pageToken='ATTACHMENTS2'
                            :value='ATTACHMENTS2'
                            :readonly='true'></picture-upload>
          </group>
          <group title="检查情况">
            <x-textarea placeholder="请输入一段描述"
                        v-model="DESCRIPTION"
                        readonly></x-textarea>
          </group>
          <group>
             <x-switch title="短信通知"
                      v-model="notifyMethod"
                      :value-map="['0,0,0','0,1,0']"
                      disabled></x-switch>
            <cell title="签发人"
                  v-model='name'></cell>
            <cell title="联系电话"
                  v-model='phone'></cell>
            <cell title="签发人部门"
                  v-model='dept'></cell>
            
            <cell title="发起日期"
                  v-model='inputDate'></cell>
           
            <cell title="检查人"
                  v-model='checkPerson'></cell>
            <cell title="检查组员"
                  v-model="inspectMemberFullName"></cell>
            <cell title="整改负责人"
                  v-model='reformer'></cell>
            <cell title="监理负责人"
                  v-model='SUPERVISORFULLNAME'></cell>

            <!-- <cell title="检查意见"
                  v-model='flag'></cell> -->
          </group>
          <group title="整改描述">
            <x-textarea placeholder="请输入一段描述"
                        v-model="option"
                        readonly></x-textarea>
          </group>
        </div>
        <div v-if="flagF">
            <div style="display:flex;padding:15px">
            <img src="../../assets/img/deal_progress.png" width="25"/>
            <div style="margin-left:2%;">处理过程</div>
          </div>
          <div v-for="(item,index) in flowList" :key="index" class="flowlist_div">
            <img src="../../assets/img/flowlist_icon.png" class="flowlist_icon" v-if="item.commandMessage !='流程开始' && item.commandMessage !='流程结束'"/>
            <div class="flowlist_div_son" v-if="item.commandMessage !='流程开始' && item.commandMessage !='流程结束'">
              <div class="dutyPerson">{{item.assignessName}}</div>
              <div class="commandMes">{{item.name}}</div>
              <div class="commandMes">{{item.commandMessage}}</div>
              <div class="createTime">{{item.createTime}}</div>
            </div>
           </div>
          <div v-for="(item,index) in flowListIng" :key="index" class="flowlist_div">
            <img src="../../assets/img/flowlist_icon_todo.png" class="flowlist_icon"/>
            <div class="flowlist_div_son">
              <div class="dutyPerson">{{item.assignessName}}</div>
              <div class="commandMes">{{item.name}}</div>
              <div class="waitToDo">待办</div>
              <div class="createTime">{{item.createTime}}</div>
            </div>
           </div>
  
        </div>
      </v-touch>
    </div>
  </div>
</template>
 
<script>
import * as L from 'leaflet'
//Vue.L = Vue.prototype.$L = L 
import { Group, Cell, XButton, Box, GroupTitle, Flexbox, FlexboxItem, Divider, Calendar, PopupPicker, Toast, XSwitch, Tab, TabItem } from 'vux'
// import { TIMEOUT } from 'dns';
var map = null;
var marker = null;
export default {
  components: {
    XButton,
    Box,
    GroupTitle,
    Group,
    Flexbox,
    FlexboxItem,
    Divider,
    Group,
    Cell,
    Calendar,
    PopupPicker,
    Toast,
    XSwitch,
    Tab,
    TabItem
  },
  name: 'HelloWorld',
  data () {
    return {
      //   msg: 'Welcome to Your Vue.js App',
      pro: this.$route.query.pro,
      proId: this.$route.query.proId,
      GUID: this.$route.query.GUID,
      centerPosition: this.$route.query.site,
      site: this.$route.query.site,
      name: "",
      phone: "",
      dept: "",
      DESCRIPTION: "",
      pageToken: "",
      fieldToken: "",
      buttonid: "",
      // map:"",
      checkDate: '',
      inputDate: "",
      ATTACHMENTS: "",
      ATTACHMENTS2: "",
      fileNameItem: [],
      notifyMethod: "",
      subject: "",
      checkStartDate: "",
      checkEndDate: "",
      reformer: "",
      option: "",
      flag: "",
      inspectMemberFullName:"",
      checkPerson:"",
      SUPERVISORFULLNAME:"",
      flagC:true,
      flagF:false,
      flowList:[],
      flowListIng:[],
    }
  },
  methods: {
    onSwipeRight () {
      this.$router.push('/dailyCheck');
    },
    backhome () {
      this.$router.push('/dailyCheck');
    },
    //下载附件
    checkFile (fileId, name, size) {
      var url = 'http://qhsz.simulate.com:8080/qhszpm/servlet/StreamSupportAction.cmd?type=%27customerDownloadService%27&FixJSON=%7B_method%3A%27streamSupportService.getAttachment%27%2C_param%3A%7BattachmentId%3A' + fileId + '%7D%7D';

      this.$router.push({
        path: '/fileInfo',
        name: 'fileInfo',
        params: {
          name: name,
          size: size,
          url: url
        }
      })
    },
    queryFlowInfo(){
      this.flagF = true
      this.flagC = false
      let vText = '{"_method":"flow.getInstIdByBizKey","_param":["' + this.GUID + '"]}';
      this.$ajax({
        url : this.COMMON_URL,
        method : 'post',
        data : {
         FixJSON : vText
        },
        async : false
      }).then(res=>{
        // console.log("看看instId",res);
        var params = '{"_method":"flow.getTaskProcess","_param":["' + res.data.instId + '"]}';
        this.$ajax({
          method: 'post',
          url: this.COMMON_URL, //+ '?_objName=formflow&_viewId=tasklist',
          data: {
            FixJSON: params
          }
          }).then((res) => {
            console.log("flowlist",res);
              this.flowList = res.data.taskListEnd;
              this.flowListIng = res.data.taskListIng;
          })
      })
    },
    getData(){
      this.flagF = false
      this.flagC = true
       //获取表单数据信息
    var params = {
      "_method": "formService.getFormData",
      "requestEventData": {        "eventType": "formInitEvent",
        "formType": 1,
        "bizObjId": "SAFECHECKINSPECT",
        "formId": "SAFECHECKINSPECT_Add"      },
      "useType": "view",
      "getData": {        "useType": "view",
        "objName": "SAFECHECKINSPECT",
        "relatedObj": ["SAFECHECKINSPECT"],
        "pk": [{ "key": "GUID", "value": this.GUID }]      },
      //   "getSysVar": { "SYSTODAY": "{sysDate.Today}", "INPUTERFULLNAME": "{sysLoginUser.userName}", "PHONENUM": "{sysLoginUser.mobil}", "INPUTERDEPTNAME": "{sysLoginUser.orgName}", "INPUTDATE": "{sysDate.Today}" },
      //   "getFormVerify": { "objName": "PMHSE_INSPECTION", "viewId": "PMHSE_INSPECTION_ADD" },
      //   "getToolbar": { "useType": "view", "objName": "PMHSE_INSPECTION", "viewId": "PMHSE_INSPECTION_ADD" }
      "getSysVar": {        "PRJNO": "{sysLoginUser.projectNo}",
        "INPUTERFULLNAME": "{sysLoginUser.userName}",
        "INPUTERNAME": "{sysLoginUser.loginId}",
        "INPUTERDEPTNAME": "{sysLoginUser.orgName}",
        "INPUTERDEPTID": "{sysLoginUser.orgId}",
        "INPUTDATE": "{sysDate.Now}", "REFORMERID": "{sysLoginUser.loginId}",
        "CHECKERID": "{sysLoginUser.userId}"      },
      "getFormVerify": { "objName": "SAFECHECKINSPECT", "viewId": "SAFECHECKINSPECT_Add" },
      "getToolbar": { "useType": "view", "objName": "SAFECHECKINSPECT", "viewId": "SAFECHECKINSPECT_Add" }
    };
    let json = {
      FixJSON: JSON.stringify(params),
    };
    this.$ajax({
      // async:false,
      url: this.COMMON_URL, //+ "?_isBreak=false&objName=SAFECHECKINSPECT&_useType=view&_pk=GUID&_pkValue=" + this.GUID,
      method: 'post',
      // data: this.signMD5(json)
      data:json
    }).then(res => {
      console.log(res);
      this.subject = res.data.getData.SAFECHECKINSPECT[0].SUBJECT.val;
      this.checkStartDate = res.data.getData.SAFECHECKINSPECT[0].PLANDATE.val.substring(0, 10);
      this.checkEndDate = res.data.getData.SAFECHECKINSPECT[0].FINISHDATE.val.substring(0, 10);
      this.ATTACHMENTS = res.data.getData.SAFECHECKINSPECT[0].ATTACHMENTS.val;
      this.ATTACHMENTS2 = res.data.getData.SAFECHECKINSPECT[0].ATTACHMENTS2.val;
      this.DESCRIPTION = res.data.getData.SAFECHECKINSPECT[0].CHECKREQUIRED.val; 
      this.name = res.data.getData.SAFECHECKINSPECT[0].INPUTERFULLNAME.val;
      this.dept = res.data.getData.SAFECHECKINSPECT[0].INPUTERDEPTNAME.val;
      this.inputDate = res.data.getData.SAFECHECKINSPECT[0].INPUTDATE.val.substring(0, 16);
      this.notifyMethod = res.data.getData.SAFECHECKINSPECT[0].NOTIFYMETHOD.val;
      this.reformer = res.data.getData.SAFECHECKINSPECT[0].REFORMER.val;
      this.option = res.data.getData.SAFECHECKINSPECT[0].DESCRIPTION.val;
      this.flag = res.data.getData.SAFECHECKINSPECT[0].FLAG.val;
      this.inspectMemberFullName = res.data.getData.SAFECHECKINSPECT[0].INSPECTMEMBERFULLNAME.val;
      this.checkPerson = res.data.getData.SAFECHECKINSPECT[0].CHECKER.val;
      this.SUPERVISORFULLNAME = res.data.getData.SAFECHECKINSPECT[0].SUPERVISORFULLNAME.val;
        this.phone = res.data.getData.SAFECHECKINSPECT[0].PHONENUM.val;
    });
    }
  },
  mounted () {
    var greenIcon = L.icon({
      iconUrl: '../src/assets/img/sign-in.png',
      iconSize: [26, 44], // size of the icon
      iconAnchor: [17, 48], // point of the icon which will correspond to marker's location
      //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    this.getData();

    //console.log("jkakjhskj"+this.site);
    //绘制地图
    map = L.map('map', {
      center: [22.521671, 113.895794],
      zoom: 13
    });
    L.tileLayer(
      "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      {
        subdomains: ["1", "2", "3", "4"],
        attribution: "高德"
      }
    ).addTo(map);
    //  map.on('click', onMapClick);
    // let th=this;
    // function onMapClick(e) {
    //   if(marker){
    //     map.removeLayer(marker)
    //   }  
    //   marker = new L.Marker(e.latlng, {icon: greenIcon}).addTo(map);  
    //   map.addLayer(marker);
    //   th.centerPosition=e.latlng;
    //   console.log(th.centerPosition);
    //   }
    console.log(this.site);
    var locate = this.site;
    var long = locate.slice(locate.indexOf("(") + 1, locate.indexOf(","));
    var latitude = locate.slice(locate.indexOf(",") + 2, locate.indexOf(")"));
    if (marker) {
      map.removeLayer(marker)
    }
    marker = new L.Marker([long, latitude], { icon: greenIcon }).addTo(map);
    map.addLayer(marker);
    map.panTo([long, latitude]);
  },
  watch: {
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .transition-view /deep/.weui-cells__title {
      margin-top: 0.77em;
    margin-bottom: 0.3em;
    padding-left: 15px;
    padding-right: 15px;
    color: #353535;
    font-size: 14px;
} */
/* .transition-view /deep/ .vux-header .vux-header-left .left-arrow:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-width: 1px 0 0 1px;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  top: 8px;
  left: 7px;
}
.transition-view /deep/ .vux-header .vux-header-title {
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #333;
} */
#map {
  width: 100%;
  height: 25%;
}
.content {
  width: 100%;
  height: 75%;
}
.file {
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 16px;
}
.file-icon {
  width: 16px;
  height: 16px;
}
.file-name {
  margin-left: 16px;
  font-size: 12px;
  color: #343434;
}
.file-size {
  font-size: 11px;
  color: #9f9f9f;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}
.sup{
  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #F5F5F5;
}
.flowlist_div{
  display:flex;
  margin-bottom: 10px;
}
.flowlist_icon{
  width:30px;
  height:30px;
  padding:10px;
}
.createTime{
  padding: 0 0 0 10px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height:20px;
}
.commandMes{
  padding: 10px 0 0 10px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height:20px;
}
.dutyPerson{
  padding: 10px 10px 5px 10px;
  font-size:16px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(25,25,25,1);
  line-height:24px;
}
.flowlist_div_son{
  background-color: #F9F9F9;
  width: 80%;
  height: 120px;
}
.waitToDo{
  padding: 10px 0 0 10px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:#eea347;
  line-height:20px;
}
</style>